<template>
  <div class="course-no-head">
        <img v-show="item.classType==='1'" class="zhongchou" :src='rightImg?rightImg:zhongchou' />
        <div class="course-div detail">
            <p class="course-title"><span>
                {{item.className}}</span><em>({{item.gradeName}})</em><em class="season">{{item.periodName}}</em>
                <span class="students" v-if="source==='orderDetail'">学员 : <template  v-for="student in studentList">{{student.name}} </template></span>
            </p>

            <p v-if="item.startCourseTime" class="course-mes">
                <img src="../../assets/img/date-gray.png" />
                <span>{{item.startCourseTime | formatDate('MM月DD日')}}-{{item.endCourseTime | formatDate('MM月DD日')}}</span>
                <span v-if="startLecture&&endLecture">( 共{{item.lectureAmount}}讲 )</span>
            </p>
            <p v-if="item.timeInterval" class="course-mes">
                <img src="../../assets/img/clock-gray.png" />
                <span>{{item.timeInterval}}  {{item.studyingTime}}</span>
            </p>
            <p v-if="item.campusAddress" class="course-mes">
                <img src="../../assets/img/location-gray.png" />
                <span>{{item.campusAddress}}</span>
            </p>
            <p v-if="startLecture&&endLecture" class="course-mes">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-jiangci"></use>
                </svg>
                <span>报读讲次：{{startLecture}} ~ {{endLecture}}</span>
            </p>
            <!--<div v-if="item.classType==='1'" class="course-status">
                <span class="course-rest">
                    报名<em>{{item.quotaMin}}</em>人可开班
                </span>
                <span class="money">
                    <em>低至</em> ￥{{ item.lowestPrice | formatNumber(2)}}
                </span>
            </div>
            <div v-else class="course-status">
                <span class="number">
                    还有<em>{{item.quota - item.regAmount}}</em>个名额
                </span>
                <span class="money">
                    ￥{{ item.studyingFee | formatNumber(2)}}
                </span>
            </div>-->
        </div>
  </div>
</template>

<script>
import zhongchou from "../../assets/img/zhongchou.png"
export default {
  name: 'course-no-head-status',
  props:['item','hasAddress','source','studentList','rightImg','startLecture','endLecture'],
  components: {
  },
  data: function () {
    return {
      zhongchou
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.course-no-head{
    /*height: 23rem;*/
    padding: 3rem 4rem 2rem 0;
    position: relative;
    background: white;
    display: flex;
    display: -webkit-flex;
}
.course-div{
    display: inline-block;
    font-size: 2.4rem;
    color: #999999;
}
.course-div.detail{
    flex: 1;
    -webkit-box-flex: 1;
    width: 100%;
}
.course-div.head{
    width: 20rem;
    text-align: center;
    position: relative;
}
.course-div.head .headImg{
    width: 12rem;
    height: 12rem;
    border-radius: 12rem;
    border: 2px solid #eee;
    /*margin-left: 3rem;*/
}
.course-div.head .diamond{
    position: absolute;
    top: 10rem;
    right: 4rem;
    width: 3.2rem;
}
.zhongchou{
    position: absolute;
    top: 0;
    right: 3rem;
    width: 5.2rem;
}
.course-title{
    font-size: 2.8rem;
    line-height: 2.8rem;
    /*height: 2.8rem;*/
    width: 100%;
    color: #333333;
    margin-bottom: 3.4rem;
}
.students{
    position: relative;
    top: .5rem;
    font-size: 2.4rem;
    line-height: 2.4rem;
    color: #999;
    display: block !important;
}
.course-title span{
    display: inline-block;
    max-width: 75%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.course-title em{
    color: #ff6600;
    font-size: 2.8rem;
    line-height: 2.8rem;
    vertical-align: top;
    margin-left: 1rem;
}
.course-mes{
    font-size: 2.4rem;
    line-height: 2.4rem;
    height: 2.4rem;
    margin-top: 1.8rem;
    
}
.course-mes .icon{
    font-size:2.8rem;
}
.course-mes span{
    vertical-align: top;
    position: relative;
    top: .2rem;
    margin-left: .6rem;
}
.course-mes img{
    width: 2.4rem;
}
.course-status{
    margin-top: 3rem;
    height: 7rem;
    line-height: 7rem;
    border-top: 2px dashed #f2f2f2;
}
.course-status .number em{
    color: #ff6600;
}
.course-status .course-rest em{
    color: #ff6600;
}
.course-status .money{
    color: #ff6600;
    font-size: 3rem;
    float: right;
    clear: both;
    position: relative;
    /*right: 3rem;*/
    font-weight: bold;
}
.money em{
    color: #999999;
}
.season{
    background: #ff7700;
    color: white !important;
    border-radius: .8rem !important;
    font-size: 2.4rem !important;
    padding: 0 .4rem !important;
}
</style>
